<template>
  <div id="app" style="margin: 10px">
    <el-row>
      客户订单：<el-input v-model="orderId"  style="width: 350px"></el-input>
      客户名称：<el-input v-model="customerName"  style="width: 350px"></el-input>
      <el-button type="primary" icon="el-icon-search" style="margin: 10px" @click="search">搜索</el-button>
      <el-button type="primary" icon="el-icon-refresh" style="margin: 10px" @click="refresh">重置</el-button>
    </el-row>

    <el-row>
      <el-table
        ref="arr"
        border
        :data="confirms"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>

        <el-table-column
          prop="id"
          label="订单单号"
          width="120">
        </el-table-column>

        <el-table-column
          prop="orderType"
          label="订单类型"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="orderType"
          label="运输类型"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="customerName"
          label="客户名称"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="orderTime"
          label="下单时间"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="departureCity"
          label="出发城市"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="destinationCity"
          label="目的城市"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="rstatus"
          label="回单状态"
          show-overflow-tooltip
          :formatter="formatterStatus">
        </el-table-column>

        <el-table-column label="操作" width="280">
          <template slot-scope="scope" >
            <el-button type="primary" @click="handleEdit(scope.row.id)" icon="el-icon-s-tools">回单管理</el-button>
            <el-button type="primary" @click="viewReceipt(scope.row.id)" icon="el-icon-view">回单详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <el-dialog
      title="修改回单信息"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <el-form ref="editReceipt" :model="editReceipt" label-width="90px">

        <el-form-item label="订单编号:">
          <el-input v-model="editReceipt.rOrderId" disabled></el-input>
        </el-form-item>

        <el-form-item label="回单编号:">
          <el-input v-model="editReceipt.rId" disabled></el-input>
        </el-form-item>

        <el-form-item label="回单时间：">
          <div class="block">
            <el-date-picker
              v-model="editReceipt.rTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </div>
        </el-form-item>


        <el-form-item label="回单状态：">
          <el-select v-model="editReceipt.rStatus" >
            <el-option label="已提交" :value="1" ></el-option>
            <el-option label="未提交" :value="0" ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="回单说明">
          <el-input type="textarea" v-model="editReceipt.rDesc"></el-input>
        </el-form-item>

      </el-form>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="manage">确定提交</el-button>

    </el-dialog>

    <el-dialog
      title="查看订单信息"
      :visible.sync="viewDialogVisible"
      width="80%"
      :before-close="handleCloseCheck">

<!--      订单与需求单-->
      <el-table
        :data="Need"
        style="width: 100%">
        <el-table-column
          prop="orderId"
          label="订单编号"
          width="180">
        </el-table-column>

        <el-table-column
          prop="orderType"
          label="订单类型"
          width="180">
        </el-table-column>

        <el-table-column
          prop="transType"
          label="运输类型">
        </el-table-column>

        <el-table-column
          prop="cName"
          label="客户名称">
        </el-table-column>

        <el-table-column
          prop="cTime"
          label="下单时间">
        </el-table-column>

        <el-table-column
          prop="route"
          label="路线">
        </el-table-column>

        <el-table-column
          prop="gType"
          label="货物类型">
        </el-table-column>

        <el-table-column
          prop="gNumber"
          label="总数量">
        </el-table-column>

        <el-table-column
          prop="gWeight"
          label="总重量">
        </el-table-column>

        <el-table-column
          prop="gVolume"
          label="总体积">
        </el-table-column>
      </el-table>

      <br><br>
<!--      派遣车单表格-->
      <el-table
        :data="dispatch"
        style="width: 100%">
        <el-table-column
          prop="dispatchId"
          label="派车订单"
          width="180">
        </el-table-column>

        <el-table-column
          prop="dispatchRoute"
          label="路线"
          width="180">
        </el-table-column>

        <el-table-column
          prop="dispatchCarCarrier"
          label="承运商">
        </el-table-column>

        <el-table-column
          prop="dispatchCarPlate"
          label="车辆牌照">
        </el-table-column>

        <el-table-column
          prop="dispatchCarDriver"
          label="司机">
        </el-table-column>
      </el-table>
      <br>

      <el-button @click="viewDialogVisible = false" type="danger">关闭</el-button>

    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: "receiptOrder",
    data() {
      return {
        confirms: [],
        currentPage:1,
        pageSizes:[2,3,5],
        pageSize:2,
        total:0,
        orderId:"",
        customerName:"",
        dialogVisible:false,
        editReceipt:{},
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        viewDialogVisible:false,
        Need:[],
        dispatch:[]
      }
    },
    methods:{
      handleCloseCheck(){
        this.viewDialogVisible=false;
        this.dispatch=[];
        this.Need=[]

      },
      viewReceipt(id){
        this.viewDialogVisible=true;
        this.findNeed(id);
        this.findDispatch(id);

      },
      findNeed(id){
        this.$http({
          method:"get",
          url: "http://localhost:80/receipt/findNeed/"+id
        }).then(resp=>{
          if(resp.data.code==100000){
            console.log(resp);
            this.Need=resp.data.data;
          }

        })
      },
      findDispatch(id){
        this.$http({
          method:"get",
          url: "http://localhost:80/receipt/findDispatch/"+id
        }).then(resp=>{
          if(resp.data.code==100000){
            console.log(resp);
            this.dispatch=resp.data.data;
            console.log(this.dispatch);
          }
        })
      },
      manage(){
        this.$http({
          method: "PUT",
          url: "http://localhost:80/receipt",
          data: this.editReceipt
        }).then(resp => {
          if (resp.data.code == 100000) {
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.dialogVisible = false;
            this.editReceipt={};
            this.findData(this.currentPage,this.pageSize,this.orderId,this.customerName);
          }
        })
      },
      handleEdit(id) {
        this.dialogVisible = true;
        this.$http({
          method:"get",
          url: "http://localhost:80/receipt/"+id
        }).then(resp=>{
          console.log(resp);
          this.editReceipt=resp.data.data;
        })
      },
      handleClose(){
        this.dialogVisible = false;
        this.editReceipt={};
      },
      refresh(){
        this.orderId="";
        this.customerName="";
      },
      formatterStatus(row){
        return row.rstatus==1?"已提交":"未提交"
      },
      handleCurrentChange(val){
        this.currentPage=val;
        this.findData(this.currentPage,this.pageSize,this.orderId,this.customerName);
      },
      handleSizeChange(val){
        this.pageSize=val;
        this.findData(this.currentPage,this.pageSize,this.orderId,this.customerName);
      },
      search(){
        this.findData(this.currentPage,this.pageSize,this.orderId,this.customerName);
      },
      checkReceipt(){
        this.$router.push({path: "/receipt/checkReceipt"});
      },
      handleSelectionChange(row){
        this.arr=row;
      },
      findData(currentPage,pageSize,orderId,customerName){
        this.$http({
          method:"get",
          url:"http://localhost:80/receipt",
          params:{
            currentPage:currentPage,
            pageSize:pageSize,
            orderId:orderId,
            customerName:customerName
          }
        }).then(resp=>{
          console.log(resp.data);
          if(resp.data.code==100000){
            this.confirms=resp.data.data.list;
            this.total=resp.data.data.total;
          }
        })
      },
    },
    created(){
      this.findData(1,2);
      this.viewReceipt(id)
    }
  }
</script>

<style scoped>

</style>
